<template>
    <!-- 外层容器 -->
    <transition name="dialog-fade">
        <div v-show="visible" class="wl-dialog_wrapper">
            <!-- 这一层主要控制对话框的宽度和高度 -->
            <div class="wl-dialog" :style="{ width, marginTop: top }">
                <!-- 头部 -->
                <div class="wl-dialog_header">
                    <slot name="title"><span class="wl-dialog_title">{{ title }}</span></slot>
                    <!-- 关闭按钮 -->
                    <button class="wl-dialog_headerbtn" @click="handleClose()">
                        <wl-icon icon="xmark"></wl-icon>
                    </button>
                </div>
                <!-- 中间部分这是一个默认插槽 -->
                <div class="wl-dialog_body">
                    <slot></slot>
                </div>
                <!-- 底部部分，也是一个插槽，是一个具名插槽 -->
                <div class="wl-dialog_footer" v-if="$slots.footer">
                    <slot name="footer"></slot>
                </div>



            </div>
        </div>
    </transition>
</template>

<script setup lang="ts">
import props from './props';
const visiblModal = defineModel('visible')
defineOptions({
    name: 'wl-dialog'
})
defineProps(props)

function handleClose() {
    visiblModal.value = false
}
</script>

<style scoped lang="scss"></style>